<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <title th:text="${rCity}+'到'+${dCity}+'物流专线'"></title>
    <!-- Bootstrap core CSS -->
    <link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<nav th:replace="~{front/log/log_topbar::top}"></nav>
<div class="container" style="margin-top: 80px">

    <div style="display: inline-block;margin-left: 20px;margin-bottom: 20px">
        <form method="post" action="/route_list_search">
            <label style="color: #fa5000;">专线搜索:</label>
            <div class="row form-group" style="display: inline-block; margin-bottom: 0;margin-left: 20px">
                <select style="width: 100px; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="rProvince" id="province1">
                    <option >出发省</option>
                </select>
                <select style="width: 100px; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="rCity" id="city1">
                    <option >出发市</option>
                </select>
                <select style="width: 100px; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="rCountry" id="country1">
                    <option >出发区</option>
                </select>
            </div>
            <div style="display: inline-block; margin-left: 40px"><img src="../images/arrowGray.png"></div>
            <div class="row form-group" style="display: inline-block; margin-bottom: 0;margin-left: 20px">
                <select style="width: 100px; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="dProvince" id="province2">
                    <option >到达省</option>
                </select>
                <select style="width: 100px; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="dCity" id="city2">
                    <option >到达市</option>
                </select>
                <select style="width: 100px; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="dCountry" id="country2">
                    <option >到达区</option>
                </select>
            </div>
            <div style="display:inline-block;margin-left:20px;"><button id="search1" style="background:#fa5000;height:35px" type="submit" class="btn btn-warning btn-sm">专线查找</button></div>
        </form>
    </div>

    <div>
        <ul style="display: block;padding: 0;margin: 0 0 20px 0;float: left;border-bottom: 2px solid #fa5000;width: 1140px">
            <li style="list-style: none;background: #fa5000;line-height:38px;width: 150px;height: 38px;font-size: 18px;text-align: center;color: white">物流专线</li>
        </ul>
    </div>

    <div id="resultContent"></div>

    <div th:each="route:${pageDTO.result}">
        <div class="row" style="margin-top: 15px; background: white;border-bottom: dashed 1px #dddddd; font-size: 14px">
            <div class="col-md-4" style="width: 364px; height: 90px;">
                <p>
                    <i style="font-style: normal; color: #999999">出发地</i>
                    <span style="font-weight: bold; color: black;" th:text="${route.routeResourceProvince}+${route.routeResourceCity}+${route.routeResourceCountry}"></span>
                </p>
                <p>
                    <i style="font-style: normal; color: #999999">到达地</i>
                    <span style="font-weight: bold; color: black;" th:text="${route.routeDestinationProvince}+${route.routeDestinationCity}+${route.routeDestinationCountry}"></span>
                </p>
                <p>
                    <span class="glyphicon glyphicon-home" style="margin-right: 8px"></span><a style="text-decoration: none" th:href="@{'/com_detail_material?companyName='+${route.routeCompany}}" target="_blank"><span style="font-weight: bold; color: #fa5000;" th:text="${route.routeCompany}"></span></a>
                </p>
            </div>
            <div class="col-md-3" style="height: 90px">
                <p>
                    <i style="font-style: normal; color: #999999">出发地址</i>
                    <span style="font-weight: bold; color: black;" th:text="${route.routeResourceAddress}"></span>
                </p>
                <p>
                    <i style="font-style: normal; color: #999999">到达地址</i>
                    <span style="font-weight: bold; color: black;" th:text="${route.routeDestinationAddress}"></span>
                </p>
            </div>
            <div class="col-md-3" style="height: 90px">
                <p>
                    <i style="font-style: normal; color: #999999">重货价格</i>
                    <span style="font-weight: bold; color: black;" th:text="${route.routePriceLight}"></span>
                </p>
                <p>
                    <i style="font-style: normal; color: #999999">轻货价格</i>
                    <span style="font-weight: bold; color: black;" th:text="${route.routePriceHeavy}"></span>
                </p>
            </div>
            <div class="col-md-2" style="height: 90px">
                <div style="margin-left:20px;"><a th:href="@{'/order_send_before?routeId='+${route.routeId}}" target="_blank"><button style="background:#fa5000;" type="submit" class="btn btn-warning">发货</button></a></div>
                <div style="margin-left:20px;"><a target="_blank" th:href="@{'/logisticsPlatform/route_detail_front?routeId='+${route.routeId}}"><button style="margin-top: 8px" type="submit" class="btn btn-default">查看</button></a></div>
            </div>
        </div>
    </div>

    <nav aria-label="Page navigation" id="pageNav">
        <ul class="pagination">
            <li><a th:href="@{'route_list_search?page=1&rProvince='+${rProvince}+'&rCity='+${rCity}+'&rCountry='+${rCountry}+'&dProvince='+${dProvince}+'&dCity='+${dCity}+'&dCountry='+${dCountry}}">首页</a></li>
            <li th:unless="${pageDTO.page.hasPrevious()}" class="disabled">
                <a aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li th:if="${pageDTO.page.hasPrevious()}">
                <a aria-label="Previous" th:href="@{'/route_list_search?page='+${pageDTO.page.getCurrent()-1}+'&rProvince='+${rProvince}+'&rCity='+${rCity}+'&rCountry='+${rCountry}+'&dProvince='+${dProvince}+'&dCity='+${dCity}+'&dCountry='+${dCountry}}">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li><span th:text="'第 '+${pageDTO.page.getCurrent()}+' 页/共 '+${pageDTO.page.getPages()}+' 页 '"></span></li>
            <li th:unless="${pageDTO.page.hasNext()}" class="disabled">
                <a aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            <li th:if="${pageDTO.page.hasNext()}">
                <a href="#" aria-label="Next" th:href="@{'/route_list_search?page='+${pageDTO.page.getCurrent()+1}+'&rProvince='+${rProvince}+'&rCity='+${rCity}+'&rCountry='+${rCountry}+'&dProvince='+${dProvince}+'&dCity='+${dCity}+'&dCountry='+${dCountry}}">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            <li><a th:href="@{'/route_list_search?page='+${pageDTO.page.getPages()}+'&rProvince='+${rProvince}+'&rCity='+${rCity}+'&rCountry='+${rCountry}+'&dProvince='+${dProvince}+'&dCity='+${dCity}+'&dCountry='+${dCountry}}">末页</a></li>
        </ul>
    </nav>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../jquery-3.3.1.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script>
    $(function () {
        $("#p1").removeClass("active");
        $("#p2").addClass("active");
        $("#p3").removeClass("active");
        $("#p4").removeClass("#active");
    })
</script>

<script>
    $(function () {
        var pageNum = [[${pageDTO.page.getPages()}]];
        console.log(pageNum);
        if (pageNum === 0){
            notFoundContent();
        }
    });

    function notFoundContent() {
        document.getElementById("pageNav").remove();
        document.getElementById("resultContent").innerHTML = "<div class=\"col-md-12\" style=\"height: 90px;\">" +
            "                <p>" +
            "                    <h2 style=\"text-align: center; font-style: normal; color: #444\">暂时没有搜到符合您查询条件的物流线路</h2>"+
            "                </p>" +
            "            </div>";
    }

    //出发地
    $(function () {
        ProvinceBind1();

        $("#province1").change(function () {
            CityBind1();
        })

        $("#city1").change(function () {
            CountryBind1();
        })
    })
    function ProvinceBind1() {
        // $("#province1").html("");
        var str = "";
        $.ajax({
            url: "/getProvince",
            success: function (data) {
                $.each(data.data, function (i,item) {
                    str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";
                })
                $("#province1").append(str);
            },
            error: function () {
                alert("Error省");
            }
        })
    }

    function CityBind1() {
        $("#city1").html("");
        var options = $("#province1 option:selected");
        var province = options.val();//province为选中省份的cityName
        // alert(province);
        if (province == "")
            return ;
        $("#city1").html("");
        var str="<option> 出发市 </option>";

        $.ajax({
            url: "/getCities",
            data: {"parentCity": province},
            success: function (data) {
                $.each(data.data, function (i, item) {
                    str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";
                });
                $("#city1").append(str);
            },
            error: function () {
                alert("Error市");
            }
        });
    }

    function CountryBind1() {
        $("#country1").html("");
        var options = $("#city1 option:selected");
        var city = options.val();
        if (city == "")
            return;
        $("#country1").html();
        var str="<option> 出发区 </option>";

        $.ajax({
            url: "/getCountries",
            data: {"parentCity": city},
            success: function (data) {
                $.each(data.data, function (i, item) {
                    str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";
                });
                $("#country1").append(str);
            }
        });
    }

    //到达地
    $(function () {
        ProvinceBind2();

        $("#province2").change(function () {
            CityBind2();
        })

        $("#city2").change(function () {
            CountryBind2();
        })
    })
    function ProvinceBind2() {
        // $("#province1").html("");
        var str = "";
        $.ajax({
            url: "/getProvince",
            success: function (data) {
                $.each(data.data, function (i,item) {
                    str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";
                })
                $("#province2").append(str);
            },
            error: function () {
                alert("Error省");
            }
        })
    }

    function CityBind2() {
        $("#city2").html("");
        var options = $("#province2 option:selected");
        var province = options.val();//province为选中省份的cityName
        // alert(province);
        if (province == "")
            return ;
        $("#city2").html("");
        var str="<option> 到达市 </option>";

        $.ajax({
            url: "/getCities",
            data: {"parentCity": province},
            success: function (data) {
                $.each(data.data, function (i, item) {
                    str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";
                });
                $("#city2").append(str);
            },
            error: function () {
                alert("Error市");
            }
        });
    }

    function CountryBind2() {
        $("#country2").html("");
        var options = $("#city2 option:selected");
        var city = options.val();
        if (city == "")
            return;
        $("#country2").html();
        var str="<option> 到达县 </option>";

        $.ajax({
            url: "/getCountries",
            data: {"parentCity": city},
            success: function (data) {
                $.each(data.data, function (i, item) {
                    str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";
                });
                $("#country2").append(str);
            }
        });
    }
</script>
</body>
</html>